<template lang="pug">
el-dialog(
  :visible.sync="show"
  width="560px"
  top="5vh"
  @open="beforeOpen"
  :before-close="handleClose"
  custom-class="table-header-modal"
  :close-on-click-modal="false"
)
  .modal-title(slot="title") 自定义显示列表
  .modal-content
    .modal-content-info 列项显示不得少于5项，最多支持自定义10个列项，灰色选中列不支持隐藏和排序
    .modal-section
      .modal-card
        .modal-card-bd
          .modal-card-header 列名
          .modal-card-draggable
            draggable.list-group.left-group-list(:list="leftList" v-bind="dragOptions" group="people" @start="start" @end="end")
              .list-group-item.primary(v-for="(item, index) in leftList", :key="item.key")
                .list-group-item-bd
                  .iconfont.icon-move
                  span {{ item.name }}
      .modal-card
        .modal-card-bd
          .modal-card-header
            span 已选
            label （可拖动调整顺序）
          .modal-card-draggable
            draggable.list-group.right-group-list(:list="rightList" v-bind="dragOptions" group="people", :disabled="disabled", :move="onMove")
              transition-group
                .list-group-item(v-for="(item, index) in rightList", :key="item.key", :class="item.isDisable ? 'disabled' : 'primary'")
                  .list-group-item-bd
                    .list-group-item-icon
                      .iconfont.icon-move(v-if="!item.isDisable")
                    span {{ item.name }}
                  .iconfont.el-icon-close(v-if="!item.isDisable" @click="delRightList(item, index)")
  .modal-footer(slot="footer")
    .modal-footer-default(@click="restoreDefault") 恢复默认
    .modal-footer-handle
      el-button(size="small" @click="handleClose") 取消
      el-button(size="small" type="primary" @click="confirm") 确定
</template>

<script>
import draggable from 'vuedraggable'
import { saveTableMenu } from 'api'
export default {
  name: 'setTableHeader',
  props: {
    show: Boolean,
    allHeaderList: Array,
    defaultList: Array,
    currentList: Array,
    minNum: {
      type: [String, Number],
      default: 5
    },
    maxNum: {
      type: [String, Number],
      default: 10
    },
    type: [Number, String],
    filterHeaders: Array
  },
  data () {
    return {
      leftList: [],
      rightList: [],
      disabled: false
    }
  },
  components: {
    draggable
  },
  computed: {
    dragOptions () {
      return {
        animation: 60,
        filter: '.disabled',
        draggable: ".primary",
        handle: '.list-group-item'
      }
    },
    // disabled () {
    //   return this.rightList.length >= this.maxNum
    // }
  },
  methods: {
    start (e) {
      if (this.rightList.length >= this.maxNum) this.disabled = true
      else this.disabled = false
    },
    end (e) {
      if (this.rightList.length > this.maxNum && e.to.className.indexOf('right-group-list') >= 0) {
        this.$message.error(`自定义列表最多只能设置${this.maxNum}项`)
      }
      this.disabled = false
    },
    onMove (e) {
      let filter = ''
      if (!e.relatedContext.element) return false
      this.filterHeaders.forEach(key => {
        if(e.relatedContext.element.key == key) filter = key
      })
      if(e.relatedContext.element.key == filter) return false
      return true
    },
    restoreDefault () {
      this.rightList = [...this.defaultList]
      let allList = this.allHeaderList
      this.rightList.forEach(item => {
        allList = allList.filter(row => row.key !== item.key)
      })
      this.leftList = allList
    },
    delRightList (item, index) {
      if (this.rightList.length <= this.minNum) {
        this.$message.error(`列表显示不得少于${this.minNum}项！`)
        return
      }
      this.rightList.splice(index, 1)
      this.leftList.push(item)
    },
    beforeOpen () {
      let allList = this.allHeaderList
      this.currentList.forEach(item => {
        allList = allList.filter(row => row.key !== item.key)
      })
      this.leftList = allList
      if (!this.currentList.length) this.rightList = [...this.defaultList]
      else this.rightList = [...this.currentList]
    },
    handleClose () {
      this.$emit('close')
    },
    async confirm () {
      try {
        await this.$axios.post(saveTableMenu, { data: JSON.stringify(this.rightList), type: this.type })
        this.$emit('confirm')
      } catch (err) {
        console.log(err)
        this.$message.error(err.message || err.ResultSet.errors)
      }
    }
  }
} 
</script>

<style type="text/css" lang="scss">
.table-header-modal {
  .el-dialog__header {
    border-bottom: 1px solid #EDEDED;
  }
  .el-dialog__body {
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #EDEDED;
  }
}
</style>

<style lang="scss" scoped>
.modal-title {
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  color: #3E4373;
}
.modal-content-info {
  font-size: 12px;
  line-height: 24px;
  color: #8B8EAB;
  padding: 0 4px;
}
.modal-section {
  margin-top: 8px;
  display: flex;
}
.modal-card {
  width: 50%;
  padding: 0 4px;
  .modal-card-bd {
    width: 100%;
    height: 600px;
    background: #FFFFFF;
    border-radius: 4px;
    border: 1px solid #EDEDED;
  }
}
.modal-card-header {
  padding: 8px;
  font-size: 14px;
  line-height: 22px;
  color: #64698F;
  border-bottom: 1px solid #EDEDED;
  label {
    color: #B2B4C7;
  }
}
.modal-card-draggable {
  padding: 8px;
  // height: 559px;
  overflow: auto;
}
.list-group {
  height: 100%;
}
.list-group-item {
  padding: 7px 8px;
  background: #F6F6F9;
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: move;
  &.disabled {
    background: #F6F6F9;
    cursor: not-allowed;
    span {
      color: #8B8EAB;
    }
  }
  .list-group-item-icon {
    width: 20px;
  }
  .list-group-item-bd {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .iconfont {
    margin-right: 4px;
    font-size: 16px;
    color: #3E4373;
  }
  .el-icon-close {
    cursor: pointer;
  }
  span {
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    color: #3E4373;
  }
}
.modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-footer-default {
  font-size: 14px;
  line-height: 22px;
  color: #FF2E42;
  cursor: pointer;
}
</style>
